<template>
    <div class="con">
        <div class="toutu">
            <img src="../assets/images/loginbg.png" alt>
        </div>
        <div class="info">
            <dl>
                <dd>账号</dd>
                <dt>
                    <input
                        type="text"
                        placeholder="请输入手机号"
                        pattern="[0-9]*"
                        v-model="phone"
                        oninput="if(this.value.length>11) this.value = this.value.slice(0,11);"
                    >
                </dt>
            </dl>
            <dl>
                <dd>验证码</dd>
                <dt>
                    <input type="text" placeholder="请输入验证码" pattern="[0-9]*" v-model="authCode">
                </dt>
                <button @click="send()" id="yzm">发送验证码</button>
            </dl>
            <dl>
                <dd>新密码</dd>
                <dt>
                    <input type="password" v-model="password" placeholder="请设置密码 (密码为8-20位字母加数字)">
                </dt>
            </dl>
        </div>
        <div class="tip">
            <div v-show="show" @click="show=!show" class="show">
                <img src="../assets/images/nochoose.png" alt>
            </div>
            <div v-show="!show" @click="show=!show" class="show">
                <img src="../assets/images/choose.png" alt>
            </div>同意并已阅读
            <span @click="service()">《卡宝钱包用户服务协议》</span>
        </div>
        <div class="btn" @click="register()">
            <button>注册</button>
        </div>
    </div>
</template>

<script>
export default {
    name: "register",
    data() {
        return {
            phone: "",
            authCode: "",
            password: "",
            show: true,
            timestamp: ""
        };
    },
    methods: {
        register() {
            var myreg = /^[1][0-9]{10}$/;
            var pwdreg = /^([a-zA-Z]+[0-9]+|[0-9]+[a-zA-Z]+)*$/;
            if (this.phone == "") {
                this.$toast("请输入手机号");
            } else if (!myreg.test(this.phone)) {
                this.$toast("请填写正确的手机号");
            } else if (this.authCode == "") {
                this.$toast("请输入验证码");
            } else if (this.password == "") {
                this.$toast("请输入密码");
            } else if (this.password.length < 8 || this.password.length > 20) {
                this.$toast("请输入8-20为密码");
            } else if (!pwdreg.test(this.password)) {
                this.$toast("请输入字母加数字");
            } else if (this.show == true) {
                this.$toast("请同意并已阅读《卡宝钱包用户服务协议》");
            } else {
                var md5pwd = this.md5(
                    `${this.md5(this.password)}${this.password}`
                );
                this.axios({
                    method: "post",
                    url: `${
                        this.siteUrl
                    }/app/login/bssUser/register?appid=web.2019&format=json&timestamp=${
                        this.timestamp
                    }`,
                    data: {
                        loginName: this.phone,
                        authCode: this.authCode,
                        password: md5pwd
                    }
                })
                    .then(response => {
                        console.log(response);
                        if (response.data.success == 1) {
                            this.$toast("注册成功");
                            this.$router.push({ name: "login" });
                        } else {
                            this.$toast(response.data.message);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        this.$toast("连接服务器异常");
                    });
            }
        },
        service() {
            this.$router.push({ name: "protocol" });
        },
        send() {
            var myreg = /^[1][0-9]{10}$/;
            if (this.phone == "") {
                this.$toast("请输入手机号");
            } else if (!myreg.test(this.phone)) {
                this.$toast("请填写正确的手机号");
            } else {
                         var yzm = document.getElementById("yzm");

                var clock = "";
                var nums = 60;
                yzm.disabled = true; //将按钮置为不可点击
                yzm.style.opacity = "0.5";
                yzm.innerHTML = nums + "s";
                clock = setInterval(doLoop, 1000); //一秒执行一次
                function doLoop() {
                    nums--;
                    if (nums > 0) {
                        yzm.innerHTML = nums + "s";
                    } else {
                        clearInterval(clock); //清除js定时器
                        yzm.disabled = false;
                        yzm.style.opacity = "1";

                        yzm.innerHTML = "获取验证码";
                        nums = 60; //重置时间
                    }
                }
                this.axios({
                    method: "post",
                    url: `${
                        this.siteUrl
                    }/app/authCode/getCode?appid=web.2019&format=json&timestamp=${
                        this.timestamp
                    }`,
                    data: {
                        phone: this.phone,
                        authType: 1
                    }
                })
                    .then(response => {
                        console.log(response);
                        if (response.data.success == 1) {
                            this.$toast(response.data.message);
                        } else {
                            this.$toast(response.data.message);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        this.$toast("连接服务器异常");
                    });
            }
        }
    },
    mounted() {
        this.timestamp = Date.parse(new Date());
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #fff;
}
.con .toutu {
    width: 100%;
}
.con .toutu img {
    width: 100%;
}
.con .info {
    width: 90%;
    margin-left: 5%;
}
.con .info dd {
    height: 40px;
    line-height: 40px;
}
.con .info dt {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ececec;
    width: 100%;
}
dl button {
    color: #ffae4e;
    position: absolute;
    right: 10px;
    top: 50px;
    background: transparent
}
dl {
    position: relative;
    margin-top: 20px;
}

.con .info input {
    width: 100%;
}

.btn {
    width: 90%;
    margin: 0 auto;
    height: 48px;
    line-height: 48px;
    background: #ffae4e;
    margin-top: 44px;
    text-align: center;
    border-radius: 25px;
    box-shadow: 0px 10px 30px 0px #fbc27f;
}
.btn button {
    width: 100%;
    font-size: 17px;
    color: #fff;
    background: transparent;
}
.tip {
    width: 90%;
    margin-left: 5%;
    margin-top: 44px;
    position: relative;
    padding-left: 22px;
}

.tip span {
    color: #ffae4e;
}
.tip img {
    width: 14px;
    height: 14px;
    position: absolute;
    left: 0px;
    top: 3px;
}
.tip .show {
    width: 18px;
    height: 18px;
    position: absolute;
    left: 0px;
    top: 0px;
}
</style>
